<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性） 
		1.控制字体： font-family、font-size、font-weight
		2.控制文本布局:text-aglin、line-height、letter-spacing、word-spacing
		3.文本修饰效果:text-decoration、text-shadow
		4.处理文本效果:white-space
		
		-->
		<style>
			/*css3语法：选择器{
				       属性:属性值;
					   属性:属性值;
					   ......
			}
			 叫法：一个样式 
			  */
			 bod y div#di{/*通过加权方式 锁定元素 权值：102*/
				 color: #ffff00;
				 /*知识点1：文本格式化属性控制字体*/
				 font-family: 华文彩云,sans-serif;
				 /*设置多个字体：浏览器会按照顺序寻找可用字体
				 用户体验，用户体验有什么字体，优先指定字体
				 通常与统配选择器使用    *{}
				 */
				/*知识点2：文本格式化属性控制字体
				font-size:字体大小属性，与单位共存
				单位  px 像素   使用特点：绝对值，PC端
				|em  相对单位，理解：倍数
				              使用特点：相对于元素按照倍数方式、移动端
				*/
			   /*知识点3：文本格式化属性控制字体
			   font-weight: 字体粗细属性，不存在单位
			   属性值：数值【100 200 300  ...  900】
			          常用数值：400
			          单词【400==normal、bold、light】
					  使用方法：统配选择器搭配使用：指定全局字体正常字体粗细
			   */
			  font-weight: 900;
			   font-size: 2em;
			   /*补充：1.英文大写；2.首字母大写；3.段落开始间距200px*/
			  
			   text-transform: capitalize;
			   text-transform:;
			    /*补充：1.英文大写；2.首字母大写；3段落开始间距200px*/
			   		   text-transform: uppercase;
			   		   text-transform: capitalize;
			   		   text-indent:200px;

			 }
			 div#d1{/*通过加权方式 锁定元素 权值：101*/
				 color: #00ff00;
				 /*知识点4：文本格式化属性控制文本格式
				 text-alight  文本对齐属性
				 text-alight left|right|center|justify:两端对齐，用于弹性布局
				 */
				text-alight:justify;
				/*知识点5：文本格式化属性控制文本格式【对齐、间隙】
				行高属性line-height:文本垂直效果
				使用方式:1.高度属性:属性值一致
				        2.在高度属性上加行高属性：属性值一致
				
				*/
			   border: 1px solid red;
			   height: 100px;
			   line-height: 100px;
			   /*补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离*/
			   /*知识点6：letter-spacing:设置字符之间间隙
			     知识点7：word-spacing:设置单词之间间隙
			   */
			  letter-sp acing: 10px;
			  letter-spacing:2px;	
			  
			 
			 }
			#d1{/*权值：100*/
				color: aqua;
			}
			a.c1{/*权值：11*/
			     /*知识点8：text-decoration 修饰超链接样式
		         使用方法：与通配符一起使用，设置全局页面超链接样式
				 属性值：none|underline|line-through
				 */
				
				/*知识点9：text-shadow 修饰文本阴影
				属性值：X轴   Y轴  blur模糊距离 color
				*/
			   
			   text-shadow: 5px 5px 5px #ff0;
			}
			p{
				border: 1px solid red;
				/*知识点10：文本换行效果
				white-space:文本换行属性
				属性值：nowrap 不换行|pre|normal
				*/
			   white-space: pre;
			   overflow: hidden;
			}
			
		</style>
	</head>
	<body>
		<!-- 需求：创建div同时制定别名：添加假文【tab】
		          id选择器，通过加权找到div,添加颜色
		 -->
		 <div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam mollitia minima earum impedit possimus unde maxime, quisquam sit quod voluptatibus magnam reprehenderit perferendis, labore optio consectetur nesciunt voluptates repellendus iure!</div>
	<hr>
	<h4>文本修饰效果</h4>
	<!-- 文本修饰相关属性
	 知识点8：text-decoration属性：设置超链接效果
	 -->
	<a class="c1 c2" href="https://tsgzy.edu.cn/">实现跳转【方式：6种】</a>
	</div><div style="height: 800px;">
	<marquee>
		<h4>处理文本效果</h4>
	</marquee>
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil aliquid voluptatum ad dicta enim? Aut, vero? Fuga sapiente possimus, necessitatibus harum earum expedita, dolorum, unde doloribus vel laudantium quasi <labore class="lorem"></labore></p>
	</div>
	</body>
</html>